<template>
	<view class="login">
		<view class="hd">
			<p>和雅医策</p>
		</view>
		<view class="bd">
			<input type="text" v-model="account" @input="inputChange" placeholder="请输入用户名" />
			<input type="password" v-model="password" placeholder="请输入密码" />
			<view class="remember-psw" @click="remember = !remember">
				<checkbox-group>
					<label>
						<checkbox value="psw" :checked="remember" :class="remember == false ? '' : 'changeStyle'" color="#FFFFFF" style="transform:scale(0.7)" />记住密码
					</label>
				</checkbox-group>
			</view>

			<button @click="tologin">登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				account: '',
				password: '',
				remember: true, //默认一开始记住密码
			}
		},
		
		onShow() {
			this.account = uni.getStorageSync('account');
			this.password = uni.getStorageSync('password');
			if (localStorage.userInfo) {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			}
		},
		methods: {
			inputChange(e){
				if(e.detail.value.length <= 2){
					return;
				}
				if(localStorage.historyNumber){
					const historyNumber = JSON.parse(localStorage.historyNumber)
					const length = historyNumber.filter((a)=>{
						return a.indexOf(e.detail.value) > -1
					})
					if(length.length == 1){
						this.account = length[0]
					}
				}
			},
			tologin() {
				var _this = this;
				if (!_this.account) {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					})
					return;
				}
				if (!_this.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return;
				}
				_this.$api.login({account: _this.account, password: _this.password}).then((res) => {	
					if (res.data.returnCode == 200) {
						uni.showToast({ title: '登录成功', icon: 'none' });
						localStorage.setItem('token', res.data.result.token);
						localStorage.setItem('userInfo', JSON.stringify(res.data.result));
						setTimeout(()=>{
							_this.$api.findByHealthId().then((res)=>{
								if(res.data.returnCode == 200){
									const data = res.data.result
									const portrait = data.headPicture || 'http://jlm-file.oss-cn-hangzhou.aliyuncs.com/jlm-product/image/portrait/2020/11/9472ab92fe90400fbee424c2d6b02fb0.png'
									_this.$api.IMgetUserToken({id:data.id,name:data.realName,portrait:portrait}).then((responest)=>{
										const token = responest.data.result.token
										localStorage.setItem('IMTOKEN',token)
										_this.$im.connect({token:localStorage.IMTOKEN}).then(function(user) {
											console.log('链接成功: ', user)
											localStorage.setItem('IMCOEDID',user.id)
											uni.showToast({ title: '登录成功', icon: 'none' });
											uni.hideLoading()
											if (_this.remember) {  //勾选记住
												uni.setStorageSync('account', _this.account);
												uni.setStorageSync('password', _this.password);	
											} else {  //未勾选记住
												uni.removeStorageSync('account');
												uni.removeStorageSync('password');
												_this.account = "";
												_this.password = "";
											}
											uni.redirectTo({
												url: '/pages/index/index'
											});
										}).catch(function(error) {
											console.log('链接失败: ', error.code, error.msg);
										});
									})
								}  
							})
						},1000)
					} else {
						uni.showToast({ title: res.data.message, icon: 'none' });
					}
				})
			}

		}
	}
</script>
<style lang="scss" scoped>
	.hd {
		height: 418upx;
		background: url('/static/img/login-bg.png');
		position: relative;
		background-size: 100% 100%;
		p {
			font-size: 52upx;
			color: #fff;
			position: absolute;
			top: 109upx;
			left: 27upx;
		}
	}

	.bd {
		width: 702upx;
		background: #fff;
		position: relative;
		z-index: 10;
		margin: -180upx auto 0;
		border-radius: 24upx;
		padding-top: 80upx;
		padding-bottom: 142upx;
		box-shadow: 0px 16upx 24upx 0px rgba(221, 255, 243, 0.4);

		input {
			width: 510upx;
			height: 60upx;
			padding-left: 13upx;
			margin: 0 auto 80upx;
			border-bottom: 1upx solid #E7E7E7;
			font-size: 26upx;
		}
		input:nth-child(2) {
			margin: 0 auto 24upx;
		}

		button {
			width: 513upx;
			height: 70upx;
			background: #38CB97;
			border-radius: 70upx;
			color: #fff;
			line-height: 70upx;
			font-size: 30upx;
			margin-top: 150upx;
			&::after {
				border: none;
			}
		}
	}

	uni-checkbox-group {
		display: block;
		width: 500upx;
		margin: 0 auto 84upx;
		font-size: 22upx;
		height: 40upx;
		line-height: 40upx;
		color: #999999;
	}
	
	
	/deep/ uni-checkbox .uni-checkbox-input {
		width: 28upx;
		height: 28upx;
	}
	
	/deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked::before {
		background: #09CC86;
		font-size: 20px !important;		
		border-radius: 6upx;
	}
	
	/deep/ .changeStyle .uni-checkbox-wrapper .uni-checkbox-input-checked{
		border: none !important;	
	}
</style>
